<script setup lang="ts">
import mdiIconsData from '@iconify-json/mdi/icons.json'
import epIconsData from '@iconify-json/ep/icons.json'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { Icon } from '@iconify/vue'
import { ref, shallowRef, computed } from 'vue'

defineOptions({
  name: 'DevIcon'
})

// 提取图标数据
const mdiIcons = ref(
  Object.entries(mdiIconsData.icons || {}).map(([key, value]) => ({
    name: key,
    prefix: mdiIconsData.prefix
  }))
)

const epIcons = ref(
  Object.entries(epIconsData.icons || {}).map(([key, value]) => ({
    name: key,
    prefix: epIconsData.prefix
  }))
)

const elIcons = shallowRef(
  Object.entries(ElementPlusIconsVue).map(([key, component]) => ({
    name: key,
    component
  }))
)

// 搜索关键词
const mdiSearchKeyword = ref('')
const epSearchKeyword = ref('')
const elSearchKeyword = ref('')

// 根据搜索关键词过滤图标 (忽略大小写，模糊匹配)
const displayedMdiIcons = computed(() => {
  if (!mdiSearchKeyword.value) {
    return mdiIcons.value.slice(0, 20)
  }
  const keyword = mdiSearchKeyword.value.toLowerCase()
  return mdiIcons.value
    .filter(icon => icon.name.toLowerCase().includes(keyword))
    .slice(0, 20)
})

const displayedEpIcons = computed(() => {
  if (!epSearchKeyword.value) {
    return epIcons.value.slice(0, 20)
  }
  const keyword = epSearchKeyword.value.toLowerCase()
  return epIcons.value
    .filter(icon => icon.name.toLowerCase().includes(keyword))
    .slice(0, 20)
})

const displayedElIcons = computed(() => {
  if (!elSearchKeyword.value) {
    return elIcons.value.slice(0, 20)
  }
  const keyword = elSearchKeyword.value.toLowerCase()
  return elIcons.value
    .filter(icon => icon.name.toLowerCase().includes(keyword))
    .slice(0, 20)
})
</script>

<template>
  <el-card class="icon-card">
    <template #header>
      <div class="card-header">
        <span>图标展示</span>
      </div>
    </template>

    <!-- MDI 图标展示 -->
    <div class="icon-section">
      <div class="section-header">
        <h3 class="section-title">@iconify-json/mdi 图标</h3>
        <el-input
          v-model="mdiSearchKeyword"
          placeholder="搜索图标名称..."
          size="small"
          class="search-input"
        />
      </div>
      <div class="icon-grid">
        <div v-for="icon in displayedMdiIcons" :key="`mdi-${icon.name}`" class="icon-item">
          <div class="icon-preview">
            <Icon :icon="`${icon.prefix}:${icon.name}`" class="icon" />
          </div>
          <div class="icon-code">
            <code>{{ `&lt;Icon :icon=\'${icon.prefix}:${icon.name}\' /&gt;` }}</code>
          </div>
        </div>
      </div>
    </div>

    <!-- EP 图标展示 -->
    <div class="icon-section">
      <div class="section-header">
        <h3 class="section-title">@iconify-json/ep 图标</h3>
        <el-input
          v-model="epSearchKeyword"
          placeholder="搜索图标名称..."
          size="small"
          class="search-input"
        />
      </div>
      <div class="icon-grid">
        <div v-for="icon in displayedEpIcons" :key="`ep-${icon.name}`" class="icon-item">
          <div class="icon-preview">
            <Icon :icon="`${icon.prefix}:${icon.name}`" class="icon" />
          </div>
          <div class="icon-code">
            <code>{{ `&lt;Icon :icon=\'${icon.prefix}:${icon.name}\' /&gt;` }}</code>
          </div>
        </div>
      </div>
    </div>

    <!-- Element Plus 图标展示 -->
    <div class="icon-section">
      <div class="section-header">
        <h3 class="section-title">Element Plus 图标</h3>
        <el-input
          v-model="elSearchKeyword"
          placeholder="搜索组件名称..."
          size="small"
          class="search-input"
        />
      </div>
      <div class="icon-grid">
        <div v-for="icon in displayedElIcons" :key="`el-${icon.name}`" class="icon-item">
          <div class="icon-preview">
            <component :is="icon.component" class="icon" />
          </div>
          <div class="icon-code">
            <code>{{ `&lt;${icon.name} /&gt;` }}</code>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.icon-card {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 18px;
  margin: 0;
}

.search-input {
  width: 200px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f5f7fa;
  transition: all 0.3s;

  &:hover {
    background-color: #eef0f3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

.icon-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  font-size: 24px;
  color: #333;
}

.icon {
  width: 32px;
  height: 32px;
}

.icon-code {
  font-size: 12px;
  color: #606266;
  word-break: break-all;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
